<template>
  <!-- 头部开始 -->
  <div class="head">
    <div class="head_nav container">
      <div class="logo">
        <nuxt-link to="/"><img :src="siteInfo.site_logo" /></nuxt-link>
      </div>
      <div class="nav_content">
        <ul>
          <li v-if="userInfo">
            <nuxt-link to="/agency/enterpriseCertification">注册认证</nuxt-link>
          </li>
          <li v-else>
            <nuxt-link to="/memberCenter/register">注册认证</nuxt-link>
          </li>
          <li><nuxt-link to="/agency/contract">合同资质</nuxt-link></li>
          <li><nuxt-link to="/agency/accredit">授权管理</nuxt-link></li>
          <li><nuxt-link to="/products/list">产品采购</nuxt-link></li>
        </ul>
      </div>
      <div class="user_info">
        <div class="head_search">
          <input type="text" placeholder="搜索" />
          <div class="btn"></div>
        </div>
        <div class="head_useravatar">
            <div v-if ="userInfo == null" class="login-icon">
                <nuxt-link to="/memberCenter/login"></nuxt-link>
            </div>

            <!-- 登录后出现以下信息 -->
            <div v-if ="userInfo != null" class="head_logined">
                <el-dropdown>
                    <div class="useravatar-box">
                        <div class="useravatar"><img :src="$commonImageUrl(userInfo.avatar)" /></div>
                        <span>{{ userInfo !=null? userInfo.nickname:'' }}</span>
                    </div>
                    <el-dropdown-menu slot="dropdown" class="top-dropdown">
                        <el-dropdown-item><nuxt-link to="/agency/accountInfo">账户信息</nuxt-link></el-dropdown-item>
                        <el-dropdown-item v-if="userData.type == 0"><nuxt-link  to="/memberCenter/mycart">我的购物车</nuxt-link></el-dropdown-item>
                        <el-dropdown-item v-else><nuxt-link to="/memberCenter/cart">我的购物车</nuxt-link></el-dropdown-item>
                        <el-dropdown-item><nuxt-link to="/agency/orderAll">我的订单</nuxt-link></el-dropdown-item>
                        <el-dropdown-item><a @click="LoginOutHandler">退出登录</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 头部结束 -->
</template>
<script>
import { mapActions } from 'vuex'
import { getUser } from "@/utils/auth";
export default {
    data() {
      return {
        userData: {},
      };
    },
    mounted: function(){
      // 头部加载一次以后直接使用
      this.GetSiteInfo()
      this.userData = getUser();
    },
    computed:{
      siteInfo(){
        return this.$store.state.site
      },
      userInfo(){
        let data = getUser();
        return data;
      },
    },
    methods:{
      ...mapActions(['GetSiteInfo','LogOut']),

      LoginOutHandler:function(){
        let _this = this;
        this.LogOut()
          .then((res) => {
            if (_this.$route.path == '/') {
              window.location.reload();
            } else {
              _this.$router.push({
                path: `/`,
              }, () => {
                window.location.reload();
              })
            }
          })
        return false;
      },
    }
};
</script>
